<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.22
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    <!-- CSS files -->
    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="page">
    <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                <a href="..">
                    <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
                </a>
            </h1>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item dropdown d-none d-md-flex me-3">
                    <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1"
                       aria-label="Show notifications">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/>
                            <path d="M9 17v1a3 3 0 0 0 6 0v-1"/>
                        </svg>
                        <span class="badge bg-red"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
                        <div class="card">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur
                                exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet
                                debitis et magni maxime necessitatibus ullam.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                       aria-label="Open user menu">
                        <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div>Paweł Kuna</div>
                            <div class="mt-1 small text-muted">UI Designer</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="#" class="dropdown-item">Set status</a>
                        <a href="#" class="dropdown-item">Profile & account</a>
                        <a href="#" class="dropdown-item">Feedback</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Settings</a>
                        <a href="#" class="dropdown-item">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar navbar-light">
                <div class="container-xl">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="../index.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12"/><path
                            d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
                            d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Home
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline
                            points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3"/><line x1="12" y1="12" x2="20"
                                                                                        y2="7.5"/><line x1="12" y1="12"
                                                                                                        x2="12"
                                                                                                        y2="21"/><line
                            x1="12" y1="12" x2="4" y2="7.5"/><line x1="16" y1="5.25" x2="8" y2="9.75"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Interface
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../empty.html">
                                            Empty page
                                        </a>
                                        <a class="dropdown-item" href="../accordion.html">
                                            Accordion
                                        </a>
                                        <a class="dropdown-item" href="../blank.html">
                                            Blank page
                                        </a>
                                        <a class="dropdown-item" href="../buttons.html">
                                            Buttons
                                        </a>
                                        <a class="dropdown-item" href="../cards.html">
                                            Cards
                                        </a>
                                        <a class="dropdown-item" href="../cards-masonry.html">
                                            Cards Masonry
                                        </a>
                                        <a class="dropdown-item" href="../colors.html">
                                            Colors
                                        </a>
                                        <a class="dropdown-item" href="../dropdowns.html">
                                            Dropdowns
                                        </a>
                                        <a class="dropdown-item" href="../icons.html">
                                            Icons
                                        </a>
                                        <a class="dropdown-item" href="../modals.html">
                                            Modals
                                        </a>
                                        <a class="dropdown-item" href="../maps.html">
                                            Maps
                                        </a>
                                        <a class="dropdown-item" href="../map-fullsize.html">
                                            Map fullsize
                                        </a>
                                        <a class="dropdown-item" href="../maps-vector.html">
                                            Vector maps
                                        </a>
                                        <a class="dropdown-item" href="../navigation.html">
                                            Navigation
                                        </a>
                                    </div>
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../charts.html">
                                            Charts
                                        </a>
                                        <a class="dropdown-item" href="../charts-heatmap.html">
                                            Charts heatmap
                                        </a>
                                        <a class="dropdown-item" href="../pagination.html">
                                            Pagination
                                        </a>
                                        <a class="dropdown-item" href="../skeleton.html">
                                            Skeleton
                                        </a>
                                        <a class="dropdown-item" href="../tabs.html">
                                            Tabs
                                        </a>
                                        <a class="dropdown-item" href="../tables.html">
                                            Tables
                                        </a>
                                        <a class="dropdown-item" href="../carousel.html">
                                            Carousel
                                        </a>
                                        <a class="dropdown-item" href="../lists.html">
                                            Lists
                                        </a>
                                        <a class="dropdown-item" href="../typography.html">
                                            Typography
                                        </a>
                                        <a class="dropdown-item" href="../page-headers.html">
                                            Page headers
                                        </a>
                                        <a class="dropdown-item" href="../markdown.html">
                                            Markdown
                                        </a>
                                        <div class="dropend">
                                            <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication"
                                               data-bs-toggle="dropdown" role="button" aria-expanded="false">
                                                Authentication
                                            </a>
                                            <div class="dropdown-menu">
                                                <a href="../sign-in.html" class="dropdown-item">Sign in</a>
                                                <a href="../sign-up.html" class="dropdown-item">Sign up</a>
                                                <a href="../forgot-password.html" class="dropdown-item">Forgot
                                                    password</a>
                                                <a href="../terms-of-service.html" class="dropdown-item">Terms of
                                                    service</a>
                                                <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
                                            </div>
                                        </div>
                                        <div class="dropend">
                                            <a class="dropdown-item dropdown-toggle" href="#sidebar-error"
                                               data-bs-toggle="dropdown" role="button" aria-expanded="false">
                                                Error pages
                                            </a>
                                            <div class="dropdown-menu">
                                                <a href="../error-404.html" class="dropdown-item">404 page</a>
                                                <a href="../error-500.html" class="dropdown-item">500 page</a>
                                                <a href="../error-maintenance.html" class="dropdown-item">Maintenance
                                                    page</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../form-elements.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6"/><path
                            d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Form elements
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><path
                            d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Extra
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="../activity.html">
                                    Activity
                                </a>
                                <a class="dropdown-item" href="../gallery.html">
                                    Gallery
                                </a>
                                <a class="dropdown-item" href="../invoice.html">
                                    Invoice
                                </a>
                                <a class="dropdown-item" href="../search-results.html">
                                    Search results
                                </a>
                                <a class="dropdown-item" href="../pricing.html">
                                    Pricing cards
                                </a>
                                <a class="dropdown-item" href="../users.html">
                                    Users
                                </a>
                                <a class="dropdown-item" href="../license.html">
                                    License
                                </a>
                                <a class="dropdown-item" href="../music.html">
                                    Music
                                </a>
                                <a class="dropdown-item" href="../widgets.html">
                                    Widgets
                                </a>
                                <a class="dropdown-item" href="../wizard.html">
                                    Wizard
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2"/><rect
                            x="4" y="13" width="6" height="7" rx="2"/><rect x="14" y="4" width="6" height="7" rx="2"/><rect
                            x="14" y="15" width="6" height="5" rx="2"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Layout
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../layout-horizontal.html">
                                            Horizontal
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical.html">
                                            Vertical
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical-transparent.html">
                                            Vertical transparent
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical-right.html">
                                            Right vertical
                                        </a>
                                        <a class="dropdown-item" href="../layout-condensed.html">
                                            Condensed
                                        </a>
                                        <a class="dropdown-item" href="../layout-condensed-dark.html">
                                            Condensed dark
                                        </a>
                                        <a class="dropdown-item" href="../layout-combo.html">
                                            Combined
                                        </a>
                                    </div>
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../layout-navbar-dark.html">
                                            Navbar dark
                                        </a>
                                        <a class="dropdown-item" href="../layout-navbar-sticky.html">
                                            Navbar sticky
                                        </a>
                                        <a class="dropdown-item" href="../layout-navbar-overlap.html">
                                            Navbar overlap
                                        </a>
                                        <a class="dropdown-item" href="../layout-dark.html">
                                            Dark mode
                                        </a>
                                        <a class="dropdown-item" href="../layout-rtl.html">
                                            RTL mode
                                        </a>
                                        <a class="dropdown-item" href="../layout-fluid.html">
                                            Fluid
                                        </a>
                                        <a class="dropdown-item" href="../layout-fluid-vertical.html">
                                            Fluid vertical
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="../docs/index.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path
                            d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><line x1="9"
                                                                                                              y1="9"
                                                                                                              x2="10"
                                                                                                              y2="9"/><line
                            x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Documentation
                    </span>
                            </a>
                        </li>
                    </ul>
                    <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                        <form action="." method="get">
                            <div class="input-icon">
                    <span class="input-icon-addon">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                           stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                           stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10"
                                                                                                              cy="10"
                                                                                                              r="7"/><line
                              x1="21" y1="21" x2="15" y2="15"/></svg>
                    </span>
                                <input type="text" class="form-control" placeholder="Search…"
                                       aria-label="Search in website">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-xl">
            <!-- Page title -->
            <div class="page-header d-print-none">
                <div class="row align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            Documentation
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="d-none d-lg-block col-lg-3">
                    <ul class="nav nav-vertical">
                        <li class="nav-item">
                            <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M8 9l3 3l-3 3"/><line x1="13" y1="15" x2="16" y2="15"/><rect x="4" y="4" width="16"
                                                                                            height="16" rx="4"/></svg>
                    </span>
                                Getting started
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-base">
                                <li class="nav-item">
                                    <a href="../docs/index.html" class="nav-link">
                                        Introduction
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/usage.html" class="nav-link">
                                        Usage
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/colors.html" class="nav-link">
                                        Colors
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/typography.html" class="nav-link">
                                        Typography
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/icons.html" class="nav-link">
                                        Icons
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"/></svg>
                    </span>
                                Components
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse show" id="menu-components">
                                <li class="nav-item">
                                    <a href="../docs/alerts.html" class="nav-link">
                                        Alerts
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/avatars.html" class="nav-link">
                                        Avatars
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/badges.html" class="nav-link">
                                        Badges
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/breadcrumb.html" class="nav-link">
                                        Breadcrumb
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/buttons.html" class="nav-link active">
                                        Buttons
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/cards.html" class="nav-link">
                                        Cards
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/carousel.html" class="nav-link">
                                        Carousel
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/dropdowns.html" class="nav-link">
                                        Dropdowns
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/divider.html" class="nav-link">
                                        Divider
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/empty.html" class="nav-link">
                                        Empty states
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/form-elements.html" class="nav-link">
                                        Form elements
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/form-helpers.html" class="nav-link">
                                        Form helpers
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/modals.html" class="nav-link">
                                        Modals
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/page-headers.html" class="nav-link">
                                        Page headers
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/progress.html" class="nav-link">
                                        Progress
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/range-slider.html" class="nav-link">
                                        Range slider
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/ribbons.html" class="nav-link">
                                        Ribbons
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/skeleton.html" class="nav-link">
                                        Skeleton
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/spinners.html" class="nav-link">
                                        Spinners
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/steps.html" class="nav-link">
                                        Steps
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/switch-icon.html" class="nav-link">
                                        Switch icon
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tables.html" class="nav-link">
                                        Tables
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tabs.html" class="nav-link">
                                        Tabs
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/timelines.html" class="nav-link">
                                        Timelines
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/toasts.html" class="nav-link">
                                        Toasts
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tooltips.html" class="nav-link">
                                        Tooltips
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z"/></svg>
                    </span>
                                Utilities
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-utils">
                                <li class="nav-item">
                                    <a href="../docs/cursors.html" class="nav-link">
                                        Cursors
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><rect x="4" y="4"
                                                                                                      width="6"
                                                                                                      height="6"
                                                                                                      rx="1"/><rect
                            x="4" y="14" width="6" height="6" rx="1"/><rect x="14" y="14" width="6" height="6" rx="1"/><line
                            x1="14" y1="7" x2="20" y2="7"/><line x1="17" y1="4" x2="17" y2="10"/></svg>
                    </span>
                                Plugins
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-plugins">
                                <li class="nav-item">
                                    <a href="../docs/autosize.html" class="nav-link">
                                        Autosize
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/input-mask.html" class="nav-link">
                                        Form input mask
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/flags.html" class="nav-link">
                                        Flags
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/payments.html" class="nav-link">
                                        Payments
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/charts.html" class="nav-link">
                                        Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="../changelog.html" class="nav-link">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><circle cx="7" cy="18"
                                                                                                        r="2"/><circle
                            cx="7" cy="6" r="2"/><circle cx="17" cy="6" r="2"/><line x1="7" y1="8" x2="7" y2="16"/><path
                            d="M9 18h6a2 2 0 0 0 2 -2v-5"/><polyline points="14 14 17 11 20 14"/></svg>
                    </span>
                                Changelog
                                <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.22</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9">
                    <div class="card card-lg">
                        <div class="card-body">
                            <div class="markdown">
                                <div>
                                    <div class="d-flex mb-4">
                                        <h1 class="mt-0">Buttons</h1>
                                        <p class="ms-auto">
                                            <a href="https://getbootstrap.com/docs/4.4/components/buttons/"
                                               target="_blank">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue"
                                                     width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5"/>
                                                    <line x1="10" y1="14" x2="20" y2="4"/>
                                                    <polyline points="15 4 20 4 20 9"/>
                                                </svg>
                                                Bootstrap documentation
                                            </a>
                                        </p>
                                    </div>
                                    <p>Use button styles that best suit your designs and encourage users to take the
                                        desired actions. You can customize the button's properties to improve the user
                                        experience of your website or system, changing the size, shape, color and many
                                        more.</p>
                                </div>
                                <h2 id="button-tag">Button tag</h2>
                                <p>As one of the most common elements of UI design, buttons have a very important
                                    function of engaging users with your website or app and guiding them in their
                                    actions. Use the <code class="language-plaintext highlighter-rouge">.btn</code>
                                    classes with the <code
                                            class="language-plaintext highlighter-rouge">&lt;button&gt;</code> element
                                    and add additional styling that will make your buttons serve their purpose and draw
                                    users’ attention.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn" role="button">Link</a>
                                            <button class="btn">Button</button>
                                            <input type="button" class="btn" value="Input"/>
                                            <input type="submit" class="btn" value="Submit"/>
                                            <input type="reset" class="btn" value="Reset"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn"</span> <span class="na">role=</span><span class="s">"button"</span><span
                                class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn"</span><span
                                    class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span> <span
                                    class="na">value=</span><span class="s">"Input"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span> <span
                                    class="na">value=</span><span class="s">"Submit"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"reset"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span> <span
                                    class="na">value=</span><span class="s">"Reset"</span><span class="nt">/&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="default-button">Default button</h2>
                                <p>The standard button creates a white background and subtle hover animation. It’s meant
                                    to look and behave as an interactive element of your page.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn" role="button">Link</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                                class="s">"btn"</span> <span class="na">role=</span><span class="s">"button"</span><span
                                                class="nt">&gt;</span>Link<span
                                                class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="button-variations">Button variations</h2>
                                <p>Use the button classes that correspond to the function of your button. The big range
                                    of available colors will help you show your buttons’ purpose and make them easy to
                                    spot.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-primary">
                                                Primary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-secondary">
                                                Secondary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-success">
                                                Success
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-warning">
                                                Warning
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-danger">
                                                Danger
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-info">
                                                Info
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-light">
                                                Light
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-dark">
                                                Dark
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger"</span><span
                                    class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-info"</span><span
                                    class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-light"</span><span
                                    class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-dark"</span><span
                                    class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="disabled-buttons">Disabled buttons</h2>
                                <p>Make buttons look inactive to show that an action is possible once the user meets
                                    certain criteria, such as completing the required fields to submit a form.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-primary disabled">
                                                Primary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-secondary disabled">
                                                Secondary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-success disabled">
                                                Success
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-warning disabled">
                                                Warning
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-danger disabled">
                                                Danger
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-info disabled">
                                                Info
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-light disabled">
                                                Light
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-dark disabled">
                                                Dark
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-primary disabled"</span><span class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-secondary disabled"</span><span
                                    class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success disabled"</span><span
                                    class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-warning disabled"</span><span
                                    class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger disabled"</span><span
                                    class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-info disabled"</span><span
                                    class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-light disabled"</span><span
                                    class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-dark disabled"</span><span
                                    class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="color-variations">Color variations</h2>
                                <p>Choose the right color for your button to make it go well with your design and draw
                                    users’ attention. Button colors can have a big influence on users’ decisions, which
                                    is why it’s important to choose them based on the intended purpose.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-blue">Blue</a>
                                            <a href="javascript:void(0)" class="btn btn-azure">Azure</a>
                                            <a href="javascript:void(0)" class="btn btn-indigo">Indigo</a>
                                            <a href="javascript:void(0)" class="btn btn-purple">Purple</a>
                                            <a href="javascript:void(0)" class="btn btn-pink">Pink</a>
                                            <a href="javascript:void(0)" class="btn btn-red">Red</a>
                                            <a href="javascript:void(0)" class="btn btn-orange">Orange</a>
                                            <a href="javascript:void(0)" class="btn btn-yellow">Yellow</a>
                                            <a href="javascript:void(0)" class="btn btn-lime">Lime</a>
                                            <a href="javascript:void(0)" class="btn btn-green">Green</a>
                                            <a href="javascript:void(0)" class="btn btn-teal">Teal</a>
                                            <a href="javascript:void(0)" class="btn btn-cyan">Cyan</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-blue"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-azure"</span><span
                                    class="nt">&gt;</span>Azure<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-indigo"</span><span
                                    class="nt">&gt;</span>Indigo<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-purple"</span><span
                                    class="nt">&gt;</span>Purple<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-pink"</span><span
                                    class="nt">&gt;</span>Pink<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-red"</span><span
                                    class="nt">&gt;</span>Red<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-orange"</span><span
                                    class="nt">&gt;</span>Orange<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-yellow"</span><span
                                    class="nt">&gt;</span>Yellow<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-lime"</span><span
                                    class="nt">&gt;</span>Lime<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-green"</span><span
                                    class="nt">&gt;</span>Green<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-teal"</span><span
                                    class="nt">&gt;</span>Teal<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-cyan"</span><span
                                    class="nt">&gt;</span>Cyan<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="ghost-buttons">Ghost buttons</h2>
                                <p>Use the <code class="language-plaintext highlighter-rouge">.btn-ghost-*</code> class
                                    to make your button look simple yet aesthetically appealing. Ghost buttons help
                                    focus users’ attention on the website’s primary design, at the same time encouraging
                                    them to take action.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-ghost-primary">Primary</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-secondary">Secondary</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-success">Success</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-warning">Warning</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-danger">Danger</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-info">Info</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-light">Light</a>
                                            <a href="javascript:void(0)" class="btn btn-ghost-dark">Dark</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-ghost-primary"</span><span class="nt">&gt;</span>Primary<span
                                class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-secondary"</span><span
                                    class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-success"</span><span
                                    class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-warning"</span><span
                                    class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-danger"</span><span
                                    class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-info"</span><span class="nt">&gt;</span>Info<span
                                    class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-light"</span><span
                                    class="nt">&gt;</span>Light<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-ghost-dark"</span><span class="nt">&gt;</span>Dark<span
                                    class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="square-buttons">Square buttons</h2>
                                <p>Use the <code class="language-plaintext highlighter-rouge">.btn-square</code> class
                                    to remove the border radius, if you want the corners of your button to be square
                                    rather than rounded.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-white btn-square">
                                                White
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-primary btn-square">
                                                Primary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-secondary btn-square">
                                                Secondary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-success btn-square">
                                                Success
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-warning btn-square">
                                                Warning
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-danger btn-square">
                                                Danger
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-info btn-square">
                                                Info
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-light btn-square">
                                                Light
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-dark btn-square">
                                                Dark
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-white btn-square"</span><span class="nt">&gt;</span>
  White
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary btn-square"</span><span
                                    class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-secondary btn-square"</span><span
                                    class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success btn-square"</span><span
                                    class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-warning btn-square"</span><span
                                    class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger btn-square"</span><span
                                    class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-info btn-square"</span><span
                                    class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-light btn-square"</span><span
                                    class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-dark btn-square"</span><span
                                    class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="pill-buttons">Pill buttons</h2>
                                <p>Add the <code class="language-plaintext highlighter-rouge">.btn-pill</code> class to
                                    your button to make it rounded and give it a modern and attractive look.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-white btn-pill">
                                                White
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-primary btn-pill">
                                                Primary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-secondary btn-pill">
                                                Secondary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-success btn-pill">
                                                Success
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-warning btn-pill">
                                                Warning
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-danger btn-pill">
                                                Danger
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-info btn-pill">
                                                Info
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-light btn-pill">
                                                Light
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-dark btn-pill">
                                                Dark
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-white btn-pill"</span><span class="nt">&gt;</span>
  White
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary btn-pill"</span><span
                                    class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-secondary btn-pill"</span><span
                                    class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success btn-pill"</span><span
                                    class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-warning btn-pill"</span><span
                                    class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger btn-pill"</span><span
                                    class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-info btn-pill"</span><span
                                    class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-light btn-pill"</span><span
                                    class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-dark btn-pill"</span><span
                                    class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="outline-buttons">Outline buttons</h2>
                                <p>Replace the default modifier class with the <code
                                        class="language-plaintext highlighter-rouge">.btn-outline-*</code> class, if you
                                    want to remove the color and the background of your button and give it a more subtle
                                    look. Outline buttons are perfect to use as secondary buttons, as they don’t
                                    distract users from the main action.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-outline-primary">
                                                Primary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-secondary">
                                                Secondary
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-success">
                                                Success
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-warning">
                                                Warning
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-danger">
                                                Danger
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-info">
                                                Info
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-light">
                                                Light
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-outline-dark">
                                                Dark
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span
                                    class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-success"</span><span
                                    class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span
                                    class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span
                                    class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-info"</span><span
                                    class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-light"</span><span
                                    class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span
                                    class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="button-size">Button size</h2>
                                <p>Add <code class="language-plaintext highlighter-rouge">.btn-lg</code> or <code
                                        class="language-plaintext highlighter-rouge">.btn-sm</code> to change the size
                                    of your button and differentiate those which should have primary focus from those of
                                    secondary importance. Adapt the button size to your design and encourage users to
                                    take actions.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <button type="button" class="btn btn-primary btn-lg">Large button</button>
                                            <button type="button" class="btn btn-lg">Large button</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span
                                class="na">type=</span><span class="s">"button"</span> <span
                                class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span
                                class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-lg"</span><span
                                    class="nt">&gt;</span>Large button<span
                                    class="nt">&lt;/button&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <button type="button" class="btn btn-primary btn-sm">Small button</button>
                                            <button type="button" class="btn btn-sm">Small button</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span
                                class="na">type=</span><span class="s">"button"</span> <span
                                class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span
                                class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-sm"</span><span
                                    class="nt">&gt;</span>Small button<span
                                    class="nt">&lt;/button&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="buttons-with-icons">Buttons with icons</h2>
                                <p>Label your button with text and add an icon to communiacate the action and make it
                                    easy to identify for users. Icons are easily recognized and improve the aesthetics
                                    of your button design, giving it a modern and atractive look.</p>
                                <p>Icons can be found <a href="/docs/icons.html#icons"><strong>here</strong></a></p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <button type="button" class="btn">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/>
                                                    <polyline points="7 9 12 4 17 9"/>
                                                    <line x1="12" y1="4" x2="12" y2="16"/>
                                                </svg>
                                                Upload
                                            </button>
                                            <button type="button" class="btn btn-warning">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"/>
                                                </svg>
                                                I like
                                            </button>
                                            <button type="button" class="btn btn-success">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M5 12l5 5l10 -10"/>
                                                </svg>
                                                I agree
                                            </button>
                                            <button type="button" class="btn btn-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <line x1="12" y1="5" x2="12" y2="19"/>
                                                    <line x1="5" y1="12" x2="19" y2="12"/>
                                                </svg>
                                                More
                                            </button>
                                            <button type="button" class="btn btn-danger">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"/>
                                                    <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"/>
                                                </svg>
                                                Link
                                            </button>
                                            <button type="button" class="btn btn-info">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"/>
                                                    <line x1="12" y1="12" x2="12" y2="12.01"/>
                                                    <line x1="8" y1="12" x2="8" y2="12.01"/>
                                                    <line x1="16" y1="12" x2="16" y2="12.01"/>
                                                </svg>
                                                Comment
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span
                                class="na">type=</span><span class="s">"button"</span> <span
                                class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Upload
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  I like
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  I agree
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  More
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Link
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-info"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Comment
<span class="nt">&lt;/button&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="social-buttons">Social buttons</h2>
                                <p>You can use the icons of popular social networking sites, which users are familiar
                                    with. Thanks to buttons with social media icons users can share content or follow a
                                    website with just one click, without leaving the website.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-facebook">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"/>
                                                </svg>
                                                Facebook
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-twitter">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"/>
                                                </svg>
                                                Twitter
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-google">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8"/>
                                                </svg>
                                                Google
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-youtube">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <rect x="3" y="5" width="18" height="14" rx="4"/>
                                                    <path d="M10 9l5 3l-5 3z"/>
                                                </svg>
                                                Youtube
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-vimeo">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z"/>
                                                </svg>
                                                Vimeo
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-dribbble">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="12" cy="12" r="9"/>
                                                    <path d="M9 3.6c5 6 7 10.5 7.5 16.2"/>
                                                    <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4"/>
                                                    <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5"/>
                                                </svg>
                                                Dribbble
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-github">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/>
                                                </svg>
                                                Github
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-instagram">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <rect x="4" y="4" width="16" height="16" rx="4"/>
                                                    <circle cx="12" cy="12" r="3"/>
                                                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"/>
                                                </svg>
                                                Instagram
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-pinterest">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <line x1="8" y1="20" x2="12" y2="11"/>
                                                    <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"/>
                                                    <circle cx="12" cy="12" r="9"/>
                                                </svg>
                                                Pinterest
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-vk">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M10 6h2v12c-4.5 -1 -8 -6.5 -9 -12"/>
                                                    <path d="M20 6c-1 2 -3 5 -5 6h-3"/>
                                                    <path d="M20 18c-1 -2 -3 -5 -5 -6"/>
                                                </svg>
                                                VK
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-rss">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="5" cy="19" r="1"/>
                                                    <path d="M4 4a16 16 0 0 1 16 16"/>
                                                    <path d="M4 11a9 9 0 0 1 9 9"/>
                                                </svg>
                                                RSS
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-flickr">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="7" cy="12" r="3"/>
                                                    <circle cx="17" cy="12" r="3"/>
                                                </svg>
                                                Flickr
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-bitbucket">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z"/>
                                                    <path d="M14 15h-4l-1 -6h6z"/>
                                                </svg>
                                                Bitbucker
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-tabler">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M8 9l3 3l-3 3"/>
                                                    <line x1="13" y1="15" x2="16" y2="15"/>
                                                    <rect x="4" y="4" width="16" height="16" rx="4"/>
                                                </svg>
                                                Tabler
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-facebook"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Facebook
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-twitter"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Twitter
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-google"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Google
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-youtube"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Youtube
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-vimeo"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Vimeo
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-dribbble"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Dribbble
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-github"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Github
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-instagram"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Instagram
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-pinterest"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Pinterest
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-vk"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  VK
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-rss"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  RSS
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-flickr"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Flickr
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-bitbucket"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Bitbucker
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-tabler"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Tabler
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <p>You can also add an icon without the name of a social networking site, if you want to
                                    display more buttons on a small space.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-facebook btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-twitter btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-google btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-youtube btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <rect x="3" y="5" width="18" height="14" rx="4"/>
                                                    <path d="M10 9l5 3l-5 3z"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-vimeo btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-dribbble btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="12" cy="12" r="9"/>
                                                    <path d="M9 3.6c5 6 7 10.5 7.5 16.2"/>
                                                    <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4"/>
                                                    <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-github btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-instagram btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <rect x="4" y="4" width="16" height="16" rx="4"/>
                                                    <circle cx="12" cy="12" r="3"/>
                                                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-pinterest btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <line x1="8" y1="20" x2="12" y2="11"/>
                                                    <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"/>
                                                    <circle cx="12" cy="12" r="9"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-vk btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M10 6h2v12c-4.5 -1 -8 -6.5 -9 -12"/>
                                                    <path d="M20 6c-1 2 -3 5 -5 6h-3"/>
                                                    <path d="M20 18c-1 -2 -3 -5 -5 -6"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-rss btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="5" cy="19" r="1"/>
                                                    <path d="M4 4a16 16 0 0 1 16 16"/>
                                                    <path d="M4 11a9 9 0 0 1 9 9"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-flickr btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="7" cy="12" r="3"/>
                                                    <circle cx="17" cy="12" r="3"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-bitbucket btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z"/>
                                                    <path d="M14 15h-4l-1 -6h6z"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-tabler btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M8 9l3 3l-3 3"/>
                                                    <line x1="13" y1="15" x2="16" y2="15"/>
                                                    <rect x="4" y="4" width="16" height="16" rx="4"/>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-facebook btn-icon"</span> <span class="na">aria-label=</span><span
                                class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-twitter btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-google btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-youtube btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-vimeo btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-dribbble btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-github btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-instagram btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-pinterest btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-vk btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-rss btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-flickr btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-bitbucket btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-tabler btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="icon-buttons">Icon buttons</h2>
                                <p>Add the <code class="language-plaintext highlighter-rouge">.btn-icon</code> class to
                                    remove unnecessary padding from your button and use an icon without any additional
                                    label. Thanks to that, you can save space and make the action easy to recognize for
                                    international users.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-primary btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M3 12h4l3 8l4 -16l3 8h4"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-github btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-success btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/>
                                                    <path d="M9 17v1a3 3 0 0 0 6 0v-1"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-warning btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-danger btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <line x1="4" y1="7" x2="20" y2="7"/>
                                                    <line x1="10" y1="11" x2="10" y2="17"/>
                                                    <line x1="14" y1="11" x2="14" y2="17"/>
                                                    <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/>
                                                    <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-purple btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <rect x="3" y="12" width="6" height="8" rx="1"/>
                                                    <rect x="9" y="8" width="6" height="12" rx="1"/>
                                                    <rect x="15" y="4" width="6" height="16" rx="1"/>
                                                    <line x1="4" y1="20" x2="18" y2="20"/>
                                                </svg>
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-white btn-icon"
                                               aria-label="Button">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <circle cx="7" cy="18" r="2"/>
                                                    <circle cx="7" cy="6" r="2"/>
                                                    <circle cx="17" cy="12" r="2"/>
                                                    <line x1="7" y1="8" x2="7" y2="16"/>
                                                    <path d="M7 8a4 4 0 0 0 4 4h4"/>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-primary btn-icon"</span> <span class="na">aria-label=</span><span
                                class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-github btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-warning btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-purple btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-white btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="dropdown-buttons">Dropdown buttons</h2>
                                <p>Create a dropdown button that will encourage users to click for more options. You can
                                    add a label with an icon or remove the label and add an icon on its own if you want
                                    to save space. Choose the option that will best suit your design and improve the
                                    user experience.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <div class="dropdown">
                                                <button type="button" class="btn dropdown-toggle"
                                                        data-bs-toggle="dropdown">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                         height="24" viewBox="0 0 24 24" stroke-width="2"
                                                         stroke="currentColor" fill="none" stroke-linecap="round"
                                                         stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                        <rect x="4" y="5" width="16" height="16" rx="2"/>
                                                        <line x1="16" y1="3" x2="16" y2="7"/>
                                                        <line x1="8" y1="3" x2="8" y2="7"/>
                                                        <line x1="4" y1="11" x2="20" y2="11"/>
                                                        <line x1="11" y1="15" x2="12" y2="15"/>
                                                        <line x1="12" y1="15" x2="12" y2="18"/>
                                                    </svg>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="javascript:void(0)">
                                                        Action
                                                    </a>
                                                    <a class="dropdown-item" href="javascript:void(0)">
                                                        Another action
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="dropdown">
                                                <button type="button" class="btn dropdown-toggle"
                                                        data-bs-toggle="dropdown">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                         height="24" viewBox="0 0 24 24" stroke-width="2"
                                                         stroke="currentColor" fill="none" stroke-linecap="round"
                                                         stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                        <rect x="4" y="5" width="16" height="16" rx="2"/>
                                                        <line x1="16" y1="3" x2="16" y2="7"/>
                                                        <line x1="8" y1="3" x2="8" y2="7"/>
                                                        <line x1="4" y1="11" x2="20" y2="11"/>
                                                        <line x1="11" y1="15" x2="12" y2="15"/>
                                                        <line x1="12" y1="15" x2="12" y2="18"/>
                                                    </svg>
                                                    Show calendar
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="javascript:void(0)">
                                                        Action
                                                    </a>
                                                    <a class="dropdown-item" href="javascript:void(0)">
                                                        Another action
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="dropdown">
                                                <button type="button" class="btn dropdown-toggle"
                                                        data-bs-toggle="dropdown">
                                                    Show calendar
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="javascript:void(0)">
                                                        Action
                                                    </a>
                                                    <a class="dropdown-item" href="javascript:void(0)">
                                                        Another action
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
                                    class="s">"btn dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- SVG icon code --&gt;</span>
  <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>
      Action
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>
      Another action
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
                                    class="s">"btn dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- SVG icon code --&gt;</span>
    Show calendar
  <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>
      Action
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>
      Another action
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
                                    class="s">"btn dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"dropdown"</span><span class="nt">&gt;</span>
    Show calendar
  <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>
      Action
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span
                                    class="s">"#"</span><span class="nt">&gt;</span>
      Another action
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="loading-buttons">Loading buttons</h2>
                                <p>Add the <code class="language-plaintext highlighter-rouge">.btn-loading</code> class
                                    to show a button’s loading state, which can be useful in the case of operations that
                                    take longer to process. Thanks to that, users will be aware of the current state of
                                    their action and won’t give it up before it’s finished.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-primary btn-loading">
                                                Button
                                            </a>
                                            <a href="javascript:void(0)" class="btn btn-primary btn-loading">
                                                Loading button with loooong content
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-primary btn-loading"</span><span class="nt">&gt;</span>
  Button
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary btn-loading"</span><span
                                    class="nt">&gt;</span>
  Loading button with loooong content
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <a href="javascript:void(0)" class="btn btn-primary">
                                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                                            Button
                                        </a>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"spinner-border spinner-border-sm me-2"</span> <span
                                    class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Button
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="list-of-buttons">List of buttons</h2>
                                <p>Create a list of buttons using the <code
                                        class="language-plaintext highlighter-rouge">.btn-list</code> container to
                                    display different actions a user can take. If you add aditional styling, such as
                                    colours, you will be able to focus users’ attention on a particular action or
                                    suggest the result.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn btn-success">Save changes</a>
                                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                                            <a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Save changes<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-danger"</span><span
                                    class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <p>If the list is long, it will be wrapped and some buttons will be moved to the next
                                    line, keeping them all evenly spaced.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn">One</a>
                                            <a href="javascript:void(0)" class="btn">Two</a>
                                            <a href="javascript:void(0)" class="btn">Three</a>
                                            <a href="javascript:void(0)" class="btn">Four</a>
                                            <a href="javascript:void(0)" class="btn">Five</a>
                                            <a href="javascript:void(0)" class="btn">Six</a>
                                            <a href="javascript:void(0)" class="btn">Seven</a>
                                            <a href="javascript:void(0)" class="btn">Eight</a>
                                            <a href="javascript:void(0)" class="btn">Nine</a>
                                            <a href="javascript:void(0)" class="btn">Ten</a>
                                            <a href="javascript:void(0)" class="btn">Eleven</a>
                                            <a href="javascript:void(0)" class="btn">Twelve</a>
                                            <a href="javascript:void(0)" class="btn">Thirteen</a>
                                            <a href="javascript:void(0)" class="btn">Fourteen</a>
                                            <a href="javascript:void(0)" class="btn">Fifteen</a>
                                            <a href="javascript:void(0)" class="btn">Sixteen</a>
                                            <a href="javascript:void(0)" class="btn">Seventeen</a>
                                            <a href="javascript:void(0)" class="btn">Eighteen</a>
                                            <a href="javascript:void(0)" class="btn">Nineteen</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span
                                    class="nt">&gt;</span>One<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span
                                    class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Three<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Four<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Five<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span
                                    class="nt">&gt;</span>Six<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Seven<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Eight<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Nine<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span
                                    class="nt">&gt;</span>Ten<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Eleven<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Twelve<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Thirteen<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Fourteen<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Fifteen<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Sixteen<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Seventeen<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Eighteen<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Nineteen<span
                                    class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <p>Use the <code class="language-plaintext highlighter-rouge">.text-center</code> or the
                                    <code class="language-plaintext highlighter-rouge">.text-end</code> modifiers to
                                    change the buttons’ alignment and place them where they suit best.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="btn-list justify-content-center">
                                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                                            <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"btn-list justify-content-center"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span
                                    class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="btn-list justify-content-end">
                                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                                            <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"btn-list justify-content-end"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span
                                    class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)"
                                               class="btn btn-outline-danger me-auto">Delete</a>
                                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                                            <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-outline-danger me-auto"</span><span
                                    class="nt">&gt;</span>Delete<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span
                                    class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span
                                    class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="buttons-with-avatars">Buttons with avatars</h2>
                                <p>Use buttons with avatars to simplify the process of interaction and make your design
                                    more personalized. Buttons can contain avatars and labels or only avatars, if
                                    displayed on a smaller space.</p>
                                <div class="example no_toc_section example-centered">
                                    <div class="example-content">
                                        <div class="btn-list">
                                            <a href="javascript:void(0)" class="btn">
                                                <span class="avatar"
                                                      style="background-image: url(../static/avatars/003m.jpg)"></span>
                                                Avatar
                                            </a>
                                            <a href="javascript:void(0)" class="btn">
                                                <span class="avatar"
                                                      style="background-image: url(../static/avatars/000f.jpg)"></span>
                                                Avatar
                                            </a>
                                            <a href="javascript:void(0)" class="btn">
                                                <span class="avatar"
                                                      style="background-image: url(../static/avatars/001f.jpg)"></span>
                                                Avatar
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span
                                class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span
                                class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
  Avatar
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
  Avatar
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
  Avatar
<span class="nt">&lt;/a&gt;</span></code></pre>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
            <div class="container">
                <div class="row text-center align-items-center flex-row-reverse">
                    <div class="col-lg-auto ms-lg-auto">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a>
                            </li>
                            <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a>
                            </li>
                            <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank"
                                                            class="link-secondary" rel="noopener">Source code</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item">
                                Copyright &copy; 2021
                                <a href=".." class="link-secondary">Tabler</a>.
                                All rights reserved.
                            </li>
                            <li class="list-inline-item">
                                <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.22</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
</body>
</html>
